@mixin secondary-variables {
    --button-border-color: var(--secondary-3000-button-border);
    --lemon-button-bg-color-active: var(--color-bg-surface-primary);
    --lemon-button-border-color-hover: var(--secondary-3000-button-border-hover);
    --lemon-button-frame-bg-color: var(--secondary-3000-frame-bg);
}

@mixin size-variables {
    &--xxsmall {
        --lemon-button-padding-horizontal: 0.25rem;
        --lemon-button-padding-vertical: 0.125rem;
        --lemon-button-padding-adjacent-icon: 0.1875rem;
        --lemon-button-font-size: 0.6875rem;
        --lemon-button-icon-size: 0.8125rem;
        --lemon-button-height: 1.25rem;
        --lemon-button-gap: 0.1875rem;
        --lemon-button-side-action-width: 1.5rem;
        --lemon-button-radius: var(--radius);
    }

    &--xsmall {
        --lemon-button-padding-horizontal: 0.375rem;
        --lemon-button-padding-adjacent-icon: 0.25rem;
        --lemon-button-font-size: 0.75rem;
        --lemon-button-icon-size: 0.875rem;
        --lemon-button-height: 1.625rem;
        --lemon-button-gap: 0.25rem;
        --lemon-button-side-action-width: 1.5rem;
    }

    &--small {
        --lemon-button-padding-horizontal: 0.5rem;
        --lemon-button-height: 2.0625rem;
        --lemon-button-gap: 0.5rem;
        --lemon-button-side-action-width: 1.75rem;
        --lemon-button-icon-size: 1.25rem;
    }

    &--large {
        --lemon-button-font-size: 1rem;
        --lemon-button-icon-size: 1.75rem;
        --lemon-button-padding-adjacent-icon: 0.75rem;
        --lemon-button-height: 3.0625rem;
        --lemon-button-gap: 0.75rem;
    }
}

@mixin shared-variables {
    --lemon-button-chrome-depth: 0.1875rem;
    --lemon-button-padding-vertical: 0.25rem;
    --lemon-button-padding-horizontal: 0.75rem;
    --lemon-button-side-action-width: 2rem;
    --lemon-button-radius: var(--radius);
}

.LemonButton,
.Link.LemonButton {
    --lemon-button-hover-depth: -0.03125rem;
    --lemon-button-press-depth: 0.03125rem;
    --lemon-button-padding-adjacent-icon: 0.375rem;
    --lemon-button-transition: opacity 200ms ease, transform 200ms ease;
    --lemon-button-border-width: 0;
    --lemon-button-bg-color: transparent;
    --button-border-color: none;
    --lemon-button-border-color-hover: none;
    --lemon-button-frame-bg-color: none;
    --lemon-button-font-size: 0.875rem;
    --lemon-button-icon-size: 1.5rem;
    --lemon-button-height: 2.3125rem;
    --lemon-button-gap: 0.5rem;
    --lemon-button-icon-opacity: 0.8;
    --lemon-button-color: var(--text-3000);

    // Make sure we override .Link's styles where needed, e.g. padding
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 0;
    font-family: var(--font-button);
    appearance: none !important; // Important as this gets overridden by Ant styles...
    cursor: pointer;
    user-select: none;
    background: none;
    border-radius: var(--lemon-button-radius);
    transition: var(--lemon-button-transition);

    .font-normal,
    &.font-normal {
        font-family: var(--font-sans);
    }

    .LemonButton__chrome {
        position: relative;
        display: flex;
        flex: 1;
        flex-direction: row;
        flex-shrink: 0;
        gap: var(--lemon-button-gap);
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        min-height: var(--lemon-button-height);
        padding: var(--lemon-button-padding-vertical) var(--lemon-button-padding-horizontal);
        font-size: var(--lemon-button-font-size);
        font-weight: 500;
        line-height: 1.5rem;
        color: var(--lemon-button-color);
        text-align: left;
        background: none;
        border-color: transparent;
        border-style: solid;
        border-width: var(--lemon-button-border-width);

        .LemonButton__content {
            display: flex;
            flex: 1;
            align-items: center;
            overflow: hidden;
            line-height: initial;
        }

        .LemonButton__icon {
            display: flex;
            flex-shrink: 0;
            place-items: center center;
            font-size: var(--lemon-button-icon-size);
            transition: color 200ms ease;

            .LemonIcon {
                opacity: var(--lemon-button-icon-opacity);
            }
        }
    }

    &[aria-disabled='true']:not(.LemonButton--loading) {
        cursor: not-allowed;
        opacity: var(--opacity-disabled);
    }

    &.LemonButton--active,
    &:hover:not([aria-disabled='true']),
    &:not([aria-disabled='true']):active {
        --lemon-button-icon-opacity: 0.75;
    }

    &.LemonButton--full-width {
        --lemon-button-padding-horizontal: 0.5rem;

        width: 100%;
    }

    &.LemonButton--loading {
        cursor: default;
    }

    &.LemonButton--no-padding {
        width: auto;
        height: auto;
        min-height: 0;
        padding: 0;

        .LemonButton__chrome {
            min-height: 0;
            padding: 0;
        }

        &.LemonButton--full-width {
            width: 100%;
        }
    }

    &.LemonButton--truncate {
        flex-shrink: 1;
        min-width: 0; // allows the truncate to happen in a flex parent
        white-space: nowrap;

        .LemonButton__content {
            display: initial; // Truncating doesn't work if display is flex
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    &.LemonButton--centered {
        .LemonButton__chrome {
            justify-content: center !important;
        }

        .LemonButton__content {
            flex: initial !important;
            text-align: center !important;
        }
    }

    &.LemonButton--primary {
        --lemon-button-bg-color: var(--primary-3000-button-bg);
        --lemon-button-bg-color-active: var(--primary-3000-button-bg);
        --button-border-color: var(--primary-3000-button-border);
        --lemon-button-border-color-hover: var(--primary-3000-button-border-hover);
        --lemon-button-frame-bg-color: var(--primary-3000-frame-bg);
        --lemon-button-color: var(--text-3000-light);

        &.LemonButton--status-alt {
            --lemon-button-bg-color: var(--primary-3000-frame-bg-light);
            --lemon-button-bg-color-active: var(--lemon-button-bg-color);
            --button-border-color: var(--primary-3000-button-border);
            --lemon-button-border-color-hover: var(--primary-3000-button-border-hover);
            --lemon-button-color: var(--text-3000-light);
        }
    }

    &.LemonButton--secondary.LemonButton--status-alt:hover,
    &.LemonButton--secondary.LemonButton--status-alt.LemonButton--active,
    &.LemonButton--secondary:not(.LemonButton--status-alt, .LemonButton--status-danger) {
        @include secondary-variables;
    }

    &.LemonButton--status-danger,
    &.LemonButton--primary.LemonButton--status-danger,
    &.LemonButton--secondary.LemonButton--status-danger {
        --lemon-button-color: var(--danger-3000-button-border-hover) !important;
        --button-border-color: var(--danger-3000-button-border);
        --lemon-button-border-color-hover: var(--danger-3000-button-border-hover);
        --lemon-button-frame-bg-color: var(--danger-3000-frame-bg);
        --lemon-button-icon-opacity: 1;
    }

    &.LemonButton--primary.LemonButton--status-danger {
        --lemon-button-bg-color: var(--red-100);
        --lemon-button-color: var(--text-3000);

        [theme='dark'] & {
            --lemon-button-bg-color: #312101;
            --lemon-button-color: var(--red-200);
        }
    }

    &.LemonButton--secondary.LemonButton--status-alt {
        --lemon-button-color: var(--color-text-secondary);

        &.LemonButton--active,
        &:hover:not([aria-disabled='true']) {
            --lemon-button-color: var(--text-3000);
        }
    }

    &.LemonButton--primary,
    &.LemonButton--secondary {
        --lemon-button-border-width: 1px;

        &:not([aria-disabled='true']):hover .LemonButton__chrome {
            &::after {
                border-color: var(--lemon-button-border-color-hover);
            }
        }

        &.LemonButton--has-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
            --lemon-button-padding-left: var(--lemon-button-padding-adjacent-icon);
        }

        &.LemonButton--has-side-icon:not(.LemonButton--no-content, .LemonButton--no-padding) {
            --lemon-button-padding-right: var(--lemon-button-padding-adjacent-icon);
        }

        .LemonButton__chrome {
            padding: calc(var(--lemon-button-padding-vertical) - var(--lemon-button-chrome-depth) * 0.5)
                var(--lemon-button-padding-right, var(--lemon-button-padding-horizontal))
                calc(var(--lemon-button-padding-vertical) + var(--lemon-button-chrome-depth) * 0.5)
                var(--lemon-button-padding-left, var(--lemon-button-padding-horizontal));
            background: transparent;

            & > * {
                z-index: 1; // Places button content above the ::after element
            }

            &::before {
                position: absolute;
                inset: -1px;
                z-index: 0;
                content: '';
                border: 1px solid var(--button-border-color);
                border-radius: var(--lemon-button-radius);
            }

            &::after {
                position: absolute;
                inset: -1px -1px calc(var(--lemon-button-chrome-depth) - 1px);
                z-index: 0;
                content: '';
                background: var(--lemon-button-bg-color);
                border: 1px solid var(--button-border-color);
                border-radius: var(--lemon-button-radius);
                box-shadow: 0 var(--lemon-button-chrome-depth) 0 -1px var(--lemon-button-frame-bg-color);
                transition: opacity 200ms ease;
            }
        }

        &.LemonButton--active,
        &:not([aria-disabled='true']):active {
            .LemonButton__chrome {
                &::after {
                    border: 1px solid var(--lemon-button-border-color-hover);
                }
            }
        }

        &:hover:not([aria-disabled='true']) {
            --lemon-button-depth: var(--lemon-button-hover-depth);
        }

        &:not([aria-disabled='true']):active {
            --lemon-button-depth: var(--lemon-button-press-depth);
        }

        &:hover:not([aria-disabled='true']),
        &:not([aria-disabled='true']):active {
            .LemonButton__chrome {
                transform: translateY(var(--lemon-button-depth));

                &::after {
                    box-shadow: 0 calc(var(--lemon-button-chrome-depth) - var(--lemon-button-depth)) 0 -1px
                        var(--lemon-button-frame-bg-color);
                }

                &::before {
                    bottom: calc(var(--lemon-button-depth) - 1px);
                }
            }
        }

        &.LemonButton--active {
            .LemonButton__chrome {
                &::after {
                    background: var(--lemon-button-bg-color-active);
                }
            }
        }
    }

    &.LemonButton--tertiary {
        &:not([aria-disabled='true']):hover,
        &[data-focused='true']:not([aria-disabled='true']):focus-visible {
            background-color: var(--color-bg-fill-button-tertiary-hover);
        }

        &.LemonButton--active,
        &[aria-expanded='true'] {
            background-color: var(--color-bg-fill-button-tertiary-active);

            // When inside a LemonButtonWithSideAction, we don't want the side button to have a background color (until hovered)
            // This is because we changed the background color for tertiary to be based on a background color with opacity
            .LemonButtonWithSideAction__side-button & {
                background-color: transparent;
            }
        }

        &.LemonButton--status-danger {
            &:not([aria-disabled='true']):hover,
            &.LemonButton--active {
                background-color: var(--danger-highlight);
            }
        }
    }

    @include shared-variables;
    @include size-variables;
}

// Don't bleed background inside colored LemonBanners
.LemonBanner--warning .LemonButton,
.LemonBanner--success .LemonButton,
.LemonBanner--error .LemonButton {
    --lemon-button-bg-color: var(--color-bg-surface-primary);
}

.LemonButtonWithSideAction {
    position: relative;
    width: fit-content;

    &--full-width {
        width: 100%;
    }

    &--tertiary .LemonButtonWithSideAction__side-button {
        --lemon-button-chrome-depth: 0px; // Tertiary buttons are flat, no depth
    }

    &:hover > .LemonButton--secondary.LemonButton--status-alt {
        @include secondary-variables;
    }

    & .LemonButtonWithSideAction__spacer {
        box-sizing: content-box;
        width: calc(
            var(--lemon-button-side-action-width) - var(
                    --lemon-button-padding-right,
                    var(--lemon-button-padding-horizontal)
                )
        );
        height: calc(var(--lemon-button-height) - 1.0625rem);
        color: var(--color-text-secondary);

        &--divider {
            padding: 0;
            margin-left: calc(var(--lemon-button-padding-horizontal) / 2);
            border-left: 1px solid currentColor;
        }
    }

    // SideAction buttons are buttons next to other buttons in the DOM but layered on top. since they're on another button, we don't want them to look like buttons.
    & .LemonButtonWithSideAction__side-button {
        position: absolute;
        top: 1px;
        right: 1px;
        bottom: calc(var(--lemon-button-chrome-depth) + 1px);
        z-index: 1; // Places button content above the main button
        background: none;
        border-top-right-radius: calc(var(--radius) - 1px);
        border-bottom-right-radius: calc(var(--radius) - 1px);
        transform: none;

        .LemonButton {
            --lemon-button-depth: 0px;

            width: var(--lemon-button-side-action-width);
            height: 100%;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .LemonButton__chrome {
            justify-content: center !important;
            padding: 0 !important;
            border: none !important;

            &::before,
            &::after {
                content: none !important;
            }
        }

        &:not([aria-disabled='true']):active {
            .LemonButton__chrome {
                transform: none !important;
            }
        }

        .LemonButton__icon {
            color: currentColor;
        }

        &:not([aria-disabled='true']):hover {
            background: rgb(0 0 0 / 10%);
        }
    }

    @include shared-variables;
    @include size-variables;
}
